<template>
  <div class="orderList">
<template
      v-if="!OrderDetail"
    >
      <div class="loading">
        <svg
          t="1616053408617"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="17643"
          width="64"
          height="64"
        >
          <path
            d="M739.487 798.497v-78.751c0-86.667-49.501-164.599-124.671-202.725 75.171-38.137 124.671-116.076 124.671-202.735v-78.747c34.78-1.811 62.499-30.658 62.499-65.863 0-36.359-29.582-65.941-65.972-65.941H287.953c-36.358 0-65.941 29.581-65.941 65.941 0 35.217 27.738 64.072 62.505 65.866v78.743c0 86.661 49.495 164.592 124.666 202.735-75.171 38.127-124.666 116.059-124.666 202.726v78.748c-34.768 1.793-62.505 30.646-62.505 65.868 0 36.368 29.582 65.95 65.941 65.95h448.061c36.39 0 65.972-29.581 65.972-65.95 0-35.21-27.719-64.054-62.499-65.865zM256.513 169.678c0-17.337 14.117-31.44 31.44-31.44h448.061c17.353 0 31.472 14.102 31.472 31.44 0 17.332-14.119 31.45-31.472 31.45H287.953c-17.322-0.001-31.44-14.118-31.44-31.45z m62.504 550.068c0-86.86 58.626-163.385 142.559-186.056a17.26 17.26 0 0 0 12.734-16.661c0-7.785-5.22-14.626-12.734-16.646-83.933-22.709-142.559-99.227-142.559-186.094v-78.655H704.98v78.655c0 86.867-58.626 163.385-142.559 186.094-7.515 2.021-12.735 8.862-12.735 16.646a17.262 17.262 0 0 0 12.735 16.661c83.933 22.673 142.559 99.196 142.559 186.056v78.659H670c-8.233-28.4-34.42-49.172-65.478-49.172h-75.286V474.897c80.982-8.637 144.278-77.368 144.278-160.603v-17.381H350.466v17.381c0 83.232 63.29 151.961 144.262 160.602v274.337H419.45c-31.053 0-57.241 20.771-65.473 49.172h-34.964v-78.659z m416.998 176.066H287.954c-17.322 0-31.44-14.117-31.44-31.455 0-17.332 14.117-31.45 31.44-31.45h448.061c17.353 0 31.472 14.119 31.472 31.45 0 17.337-14.119 31.455-31.472 31.455z"
            p-id="17644"
            fill="#1296db"
          ></path>
        </svg>
        <span class="loading_text">加载中...</span>
      </div>
    </template>
    <template v-else>
    <div class="order_info">
      <div class="info_data">
        <p>订单信息</p>
        <span>累计订单：{{ OrderDetail.order_count }} </span>
        <span>总消费：￥{{ OrderDetail.sum_price }}</span>
      </div>
      <div class="info_icon">
        <img src="http://47.115.51.185/h5/img/orderTime.e95f9090.png" alt="" />
      </div>
    </div>
    <div class="order_list" >
      <van-tabs v-model="active" animated @click="getOrderList">
        <van-tab>
          <template #title>
            <div class="orderList_type">
              <span>待付款</span>
              <span>{{ OrderDetail.unpaid_count }}</span>
            </div>
          </template>
          <template #default v-if="OrderList">
            <div class="nodata" v-if="OrderList.length == 0">
              <img
                src="http://47.115.51.185/h5/img/noOrder.90017ce2.png"
                alt=""
              />
            </div>
            <div v-else>
              <transition-group tag="ul" class="List_item" name="slide">
                <li v-for="item in OrderList" :key="item.id">
                  <div class="item_time">
                    <span class="add_time">{{ item._add_time }}</span>
                    <span class="status">未支付</span>
                  </div>
                  <div class="product_info">
                    <div class="info_introduce" @click="ToOrderDetail(item.order_id)">
                      <van-image
                        :src="item.cartInfo[0].productInfo.image"
                        @click.stop="ToDetail(item.cartInfo[0].product_id)"
                      />
                      <p>{{ item.cartInfo[0].productInfo.store_name }}</p>
                      <div class="introduce_price">
                        <span>￥{{ item.cartInfo[0].productInfo.price }}</span>
                        <span>x{{ item.total_num }}</span>
                      </div>
                    </div>
                    <div class="info_commodity">
                      <span>共{{ item.cartInfo.length }}件商品，总金额 </span>
                      <span>￥{{ item.pay_price }}</span>
                    </div>
                  </div>
                  <div class="operate">
                    <span @click="cancelOrder(item.order_id)">取消订单</span>
                    <span @click="payNow(item.order_id)">立即付款</span>
                  </div>
                </li>
              </transition-group>
            </div>
          </template>
        </van-tab>
        <van-tab>
          <template #title>
            <div class="orderList_type">
              <span>待发货</span>
              <span>{{ OrderDetail.unshipped_count }}</span>
            </div>
          </template>
          <template #default v-if="OrderList">
            <div class="nodata" v-if="OrderList.length == 0">
              <img
                src="http://47.115.51.185/h5/img/noOrder.90017ce2.png"
                alt=""
              />
            </div>
            <div v-else>
              <transition-group tag="ul" class="List_item" name="slide">
                <li v-for="item in OrderList" :key="item.id">
                  <div class="item_time">
                    <span class="add_time">{{ item._add_time }}</span>
                    <span class="status">未发货</span>
                  </div>
                  <div class="product_info">
                    <div class="info_introduce" @click="ToOrderDetail(item.order_id)">
                      <van-image
                        :src="item.cartInfo[0].productInfo.image"
                        @click.stop="ToDetail(item.cartInfo[0].product_id)"
                      />
                      <p>{{ item.cartInfo[0].productInfo.store_name }}</p>
                      <div class="introduce_price">
                        <span>￥{{ item.cartInfo[0].productInfo.price }}</span>
                        <span>x{{ item.total_num }}</span>
                      </div>
                    </div>
                    <div class="info_commodity">
                      <span>共{{ item.cartInfo.length }}件商品，总金额 </span>
                      <span>￥{{ item.pay_price }}</span>
                    </div>
                  </div>
                  <div class="operate">
                    <span v-show="false"></span>
                    <span @click="ToOrderDetail(item.order_id)">查看详情</span>
                  </div>
                </li>
              </transition-group>
            </div>
          </template>
        </van-tab>
        <van-tab>
          <template #title>
            <div class="orderList_type">
              <span>待收货</span>
              <span>{{ OrderDetail.received_count }}</span>
            </div>
          </template>
          <template #default v-if="OrderList">
            <div class="nodata" v-if="OrderList.length == 0">
              <img
                src="http://47.115.51.185/h5/img/noOrder.90017ce2.png"
                alt=""
              />
            </div>
            <div v-else>订单列表</div>
          </template>
        </van-tab>
        <van-tab>
          <template #title>
            <div class="orderList_type">
              <span>待评价</span>
              <span>{{ OrderDetail.evaluated_count }}</span>
            </div>
          </template>
          <template #default v-if="OrderList">
            <div class="nodata" v-if="OrderList.length == 0">
              <img
                src="http://47.115.51.185/h5/img/noOrder.90017ce2.png"
                alt=""
              />
            </div>
            <div v-else>订单列表</div>
          </template>
        </van-tab>
        <van-tab>
          <template #title>
            <div class="orderList_type">
              <span>已完成</span>
              <span>{{ OrderDetail.complete_count }}</span>
            </div>
          </template>
          <template #default v-if="OrderList">
            <div class="nodata" v-if="OrderList.length == 0">
              <img
                src="http://47.115.51.185/h5/img/noOrder.90017ce2.png"
                alt=""
              />
            </div>
            <div v-else>订单列表</div>
          </template>
        </van-tab>
      </van-tabs>
    </div>
    <van-action-sheet v-model="paymentShow" title="选择付款方式">
      <div class="content">
        <div class="wx" @click="PayType('weixin')">
          <div class="wx_left">
            <div class="left_icon" style="background:#09bb07;border-radius:50%;padding:3px">
              <van-icon name="wechat" color="white" size="0.4rem" />
            </div>
            <div class="right_text">
              <span>微信支付</span>
              <span>使用微信快捷支付</span>
            </div>
          </div>
          <div class="wx_right">
            <van-icon name="arrow" color="#a8a8a8" size="0.35rem"/>
          </div>
        </div>
        <div class="my" @click="PayType('yue')">
          <div class="my_left">
            <div class="left_icon">
              <van-icon name="gold-coin" color="#fe960f" size="0.5rem" />
            </div>
            <div class="right_text">
              <span>余额支付</span>
              <span>当前可用余额<span></span></span>
            </div>
          </div>
          <div class="my_right">
            <van-icon name="arrow" color="#a8a8a8" size="0.35rem"/>
          </div>
        </div>
      </div>
    </van-action-sheet>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      OrderDetail: null,
      OrderList: null,
      paymentShow:false
    };
  },
  created() {
    this.axios.get("/api/order/data").then((response) => {
      this.OrderDetail = response.data.data;
    });
    if (this.$route.query.id) {
      this.getOrderList(this.$route.query.id);
      this.active = Number(this.$route.query.id);
    } else {
      this.getOrderList(0);
    }
  },
  methods: {
    getOrderList(id) {
      this.OrderList = ''
      this.axios
        .get("api/order/list?page=1&limit=20&type=" + id)
        .then((response) => {
          this.OrderList = response.data.data;
        });
    },
    cancelOrder(id) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确认取消该订单？",
        })
        .then(() => {
          // on confirm
          this.axios
            .post("/api/order/cancel", { id: id })
            .then((response) => {
              this.$toast(response.data.msg)
            })
            .then(() => {
              this.getOrderList(0);
              this.axios.get("/api/order/data").then((response) => {
                this.OrderDetail = response.data.data;
              });
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    ToDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id,
        },
      });
    },
    payNow(orderId){
      this.paymentShow = true
      this.orderId = orderId;
    },
    PayType(type){
      this.paymentShow = false;
      this.axios.post('/api/order/pay',{
        from: "weixinh5",
        paytype:type,
        uni:this.orderId,
      }).then(response=>{
        if(response.data.status!=200){
          this.$toast(response.data.msg)
        }
      })
    },
    ToOrderDetail(id){
      this.$router.push({
        path:'/order/detail',
        query:{
          id
        }
      })
    }
  },
};
</script>

<style lang="less">
.orderList {
  width: 100%;
  .loading {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .loading_text {
      color: #272822;
    }
    @keyframes move {
      0% {
        transform: rotateZ(0deg);
      }

      15% {
        transform: rotateZ(180deg);
      }

      55% {
        transform: rotateZ(180deg);
      }

      70% {
        transform: rotateZ(360deg);
      }

      100% {
        transform: rotateZ(360deg);
      }
    }

    .icon {
      animation: move 4s linear 2s infinite;
    }
  }
  .order_info {
    width: 100%;
    height: 130px;
    background-color: #e93323;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    padding-top: 25px;
    .info_data {
      p {
        color: white;
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 10px;
      }
      span {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
      }
    }
    .info_icon {
      width: 61px;
      height: 54.5px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .order_list {
    width: 100%;
    padding: 0 15px;
    .van-tabs {
      width: 100%;
      transform: translateY(-30px);
      .van-tabs__wrap {
        height: 70px;
        border-radius: 4px;
        .van-tabs__nav--line {
          padding-bottom: 0;
          .van-tab--active {
            .van-tab__text {
              span {
                color: black;
              }
            }
          }
          .orderList_type {
            display: flex;
            flex-direction: column;
            align-items: center;
            span {
              color: #64657f;
            }
          }
          .van-tabs__line {
            bottom: 0;
          }
        }
      }
      .nodata {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 207px;
          height: 168px;
        }
      }
      .List_item {
        width: 100%;
        margin-top: 10px;
        >li {
          width: 100%;
          border-radius: 4px;
          margin-bottom: 10px;
          background-color: #fff;
          .item_time {
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #f3f3f3;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .add_time {
              font-size: 14px;
            }
            .status {
              color: red;
            }
          }
          .product_info {
            width: 100%;
            padding: 15px 15px;
            border-bottom: 1px solid #f3f3f3;
            .info_introduce {
              overflow: hidden;
              .van-image {
                width: 60px;
                height: 60px;
                float: left;
              }
              p {
                width: 150px;
                float: left;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-size: 14px;
                margin-left: 10px;
                margin-top: 5px;
              }
              .introduce_price {
                float: right;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                color: #9999b3;
                font-size: 14px;
                margin-top: 5px;
              }
            }
            .info_commodity {
              width: 100%;
              display: flex;
              justify-content: flex-end;
              margin-top: 15px;
              span {
                font-size: 12px;
                &:nth-child(2) {
                  font-weight: bold;
                  color: red;
                  margin-left: 3px;
                }
              }
            }
          }
          .operate {
            width: 100%;
            height: 60px;
            font-size: 14px;
            padding: 0 15px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            span {
              padding: 6px 15px;
              border-radius: 20px;
              &:nth-child(1) {
                color: #aaaaaa;
                border: 1px solid #aaaaaa;
                margin-right: 10px;
              }
              &:nth-child(2) {
                color: white;
                background-color: #e93323;
              }
            }
          }
        }
      }
    }
  }
  .van-popup {
    .van-action-sheet__header{
      border-bottom: 1px solid #f5f5f5;
    }
    .van-action-sheet__content{
      padding: 0 10px;
      .content{
        width: 100%;
        padding-bottom: 40px;
        .wx,.my{
          display: flex;
          height: 60px;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #f5f5f5;
          .wx_left,.my_left{
            display: flex;
            align-items: center;
            .van-icon-wechat{
              display: block;
            }
            .right_text{
              display: flex;
              flex-direction: column;
              margin-left: 10px;
              span{
                &:nth-child(2){
                  font-size: 12px;
                  color: #a7a7a7;
                  margin-top: 3px;
                }
              }
            }
          }
        }
      }
    }
  }
  .slide-enter-active {
    animation: slide-in 0.6s ease-out;
  }
  .slide-leave-active {
    animation: slide-out 0.4s ease-out;
    /* 这里在离开的时候，需要让这个元素脱离标准流，不然后面的元素动不了 */
    position: absolute;
  }
  /* 想要让动画平滑一点，需要加v-move的类名，v-可以别name的值 */
  .slide-move {
    transition: all 0.8s;
  }
  @keyframes slide-in {
    from {
      transform: translateY(50px);
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes slide-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
}
</style>